<template>
  <div id="app">
    <input type="text" v-model="things" v-on:keyup.enter="addThings">
    <button v-on:click='addThings'>添加</button>
    <h1>{{title}}</h1>
    <ul>
      <li v-for="(todo,index) in todos">
        <label>{{index+1}}.<span :class="{del:todo.done}">{{todo.name}}</span></label>
        <time>{{todo.created | date}}</time>
      </li>
    </ul>
    <File :total="todos.length" :undo="undo"></File>
  </div>
</template>

<script>
  import File from './Todo.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')

export default {
  name: 'app',
  components:{File},
  data () {
    return {
      title: 'vue-todos',
      todos: [
        {name: "阅读一本关于前端开发的书", done: '', created: Date.now()},
        {name: "补充范例代码", done: true, created: Date.now()},
        {name: "写心得", done: '', created: Date.now()}
      ]
    }
  },
  methods: {
    addThings: function () {
      this.todos.push({name: this.things, done: false})
    }
  },
  filters: {
    date (val) {
      return moment(val).calendar()
    }
  },
  computed:{
    undo:function(){
      var count= 0
      for(var i=0;i<this.todos.length;i++)
      {
        if(!this.todos[i].done){
          count++;
        }
      }
      return count;
    }
  }
}
</script>

<style>.del{text-decoration:line-through}</style>